<template>
  <div class="sign-room">
    <el-row type="flex" justify="center">
      <el-col :sm="24" :md="24">
        <div class="img-form">
          <div style="display: flex;justify-content: center;">
            <el-carousel
              height="400px"
              style="width: 550px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;"
            >
              <el-carousel-item v-for="(ad, index) in ads" :key="index">
                <el-image
                  fit="cover"
                  style="width: 550px;height: 100%"
                  :src="ad.image"
                />
              </el-carousel-item>
            </el-carousel>
            <div
              style="background-color: white;min-width: 400px;height: 400px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;"
            >
              <div style="padding: 10px;">
                <h2 style="text-align: center;margin-top: 50px;">
                  趣印猫定制系统
                </h2>
                <el-form
                  style="margin: 40px 30px 30px;"
                  ref="loginForm"
                  :model="loginForm"
                  :rules="loginRules"
                  label-position="left"
                >
                  <el-form-item prop="username">
                    <el-input
                      v-model="loginForm.username"
                      placeholder="请输入您的手机号"
                    >
                      <i slot="prefix" class="el-input__icon el-icon-phone"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      v-model="loginForm.password"
                      placeholder="请输入您的密码"
                      type="password"
                    >
                      <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item style="text-align: center;">
                    <el-button
                      @click="onLogin"
                      :loading="loading"
                      type="primary"
                      style="width: 100%;"
                      >登录</el-button
                    >
                  </el-form-item>
                  <el-form-item style="text-align: right;">
                    <el-button type="text">忘记密码</el-button>
                    <!--  <el-button type="text" @click="regDialogVisible = true"
                      >免费注册</el-button
                    >-->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--    注册弹框-->
    <el-dialog
      title="商家注册"
      class="register"
      :visible.sync="regDialogVisible"
      :show-close="false"
      top="60px"
      width="450px"
      center
    >
      <div style="margin: -10px 25px 10px;">
        <el-form ref="registerForm" :model="registerModel" :rules="regRules">
          <el-form-item prop="nickname">
            <el-input
              v-model="registerModel.masterUsername"
              type="text"
              maxlength="25"
              minLength="2"
              placeholder="请输入联系人名称(2~25个字符)"
            >
              <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="mobile">
            <el-input
              placeholder="请输入联系人手机号"
              v-model="registerModel.masterMobile"
              type="text"
            >
              <i slot="prefix" class="el-input__icon el-icon-phone"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="registerModel.password"
              maxlength="16"
              minLength="6"
              placeholder="请输入密码(6~16个字符)"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="repeatPwd">
            <el-input
              type="password"
              v-model="registerModel.repeatPwd"
              maxlength="16"
              minLength="6"
              placeholder="请再次输入您的登录密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-s-check"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="repeatPwd">
            <el-input
              v-model="registerModel.supName"
              placeholder="请输入公司名称"
            >
              <i slot="prefix" class="el-input__icon el-icon-s-check"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="repeatPwd">
            <el-input
              v-model="registerModel.industry"
              placeholder="请输入公司的主营业务"
            >
              <i slot="prefix" class="el-input__icon el-icon-s-check"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="repeatPwd">
            <el-input
              v-model="registerModel.supAddress"
              placeholder="请输入公司地址"
            >
              <i slot="prefix" class="el-input__icon el-icon-s-check"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="smsCode">
            <div style="display: flex;">
              <el-input
                v-model="registerModel.smsCode"
                placeholder="请输入短信验证码"
              >
                <i slot="prefix" class="el-input__icon el-icon-key"></i>
              </el-input>
              <el-button
                @click="onSendSmsCode"
                :loading="sendSmsLoading"
                :disabled="sendTxtMsgDisabled"
                style="margin-left: 6px;"
                type="success"
                plain
                >{{ sendTxtMsgContent }}
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 100%;"
              :loading="regLoading"
              type="danger"
              @click="onRegister"
              >注册</el-button
            >
          </el-form-item>
          <el-form-item style="text-align: center;">
            <a
              >注册即代表您同意我们的<span style="color: red;"
                >《用户协议》</span
              ></a
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  isMobile,
  isVaildMsgAuthCode,
  isValidPassword,
  isvalidUsername
} from "@/utils/validate";
// import { registerSupplier, sendSmsCode } from "@/api/auth-api";

export default {
  name: "Login",
  data() {
    //验证两次密码
    const validateRepeatPwd = (rule, value, callback) => {
      if (this.registerModel.password !== this.registerModel.repeatPwd) {
        callback(new Error("两次输入密码不一致，请重新输入"));
      } else {
        callback();
      }
    };
    //验证短信验证码
    const validateTxtSmsCode = (rule, value, callback) => {
      if (!isVaildMsgAuthCode(value)) {
        callback(new Error("请输入4个数字的短信验证码"));
      } else {
        callback();
      }
    };
    //验证手机号
    const validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    //验证用户名
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error("请输入正确的用户名,用户名长度在2~25个字符之间"));
      } else {
        callback();
      }
    };
    //验证密码
    const validatePass = (rule, value, callback) => {
      if (!isValidPassword(value)) {
        callback(new Error("请输入正确的密码,密码由6-16个数字和字母组合"));
      } else {
        callback();
      }
    };
    return {
      regLoading: false,
      sendSmsLoading: false,
      registerModel: {
        supName: "",
        industry: "",
        supAddress: "",
        masterUsername: "",
        masterMobile: "",
        // nickname: "",
        // mobile: "",
        password: "",
        repeatPwd: "",
        smsCode: ""
      },
      regDialogVisible: false,
      loading: false,
      ads: [
        {
          image:
            "https://img.alicdn.com/tfs/TB1yK3oyUH1gK0jSZSyXXXtlpXa-840-768.png",
          link: ""
        },
        {
          image: "http://www.qfaka.com/view/tpl/qfaka/images/pic/IndPic05.png",
          link: ""
        },
        {
          image: "http://www.qfaka.com/view/tpl/qfaka/images/pic/IndPic02.png",
          link: ""
        }
      ],
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      totalTime: 120, //发送验证码间隔时间
      sendTxtMsgContent: "发送验证码",
      sendTxtMsgDisabled: false,
      //注册表单属性验证规则
      regRules: {
        masterMobile: [
          { required: true, trigger: "change", validator: validateMobile }
        ],
        masterUsername: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePass }
        ],
        repeatPwd: [
          { required: true, trigger: "change", validator: validateRepeatPwd }
        ],
        smsCode: [
          { required: true, trigger: "change", validator: validateTxtSmsCode }
        ]
      }
    };
  },
  methods: {
    onRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.regLoading = true;
          /* registerSupplier(this.registerModel)
            .then(() => {
              this.$message.success("注册成功");
              this.regDialogVisible = false;
              this.regLoading = false;
            })
            .catch(() => {
              this.regLoading = false;
            });*/
        } else {
          return false;
        }
      });
    },
    //发送验证码可用倒计时
    countDown() {
      if (this.sendTxtMsgDisabled) return; //改动的是这两行代码
      this.sendTxtMsgDisabled = true;
      this.sendTxtMsgContent = this.totalTime + "s后重新发送";
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.sendTxtMsgContent = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          window.clearInterval(clock);
          this.sendTxtMsgContent = "重新发送";
          this.totalTime = 120;
          this.sendTxtMsgDisabled = false; //这里重新开启
        }
      }, 1000);
    },
    onSendSmsCode() {
      if (!isMobile(this.registerModel.masterMobile)) {
        this.$message.error("请输入正确的手机号码");
        return;
      }
      this.sendSmsLoading = true;
      /* sendSmsCode(this.registerModel.masterMobile)
        .then(() => {
          this.$message.success("短信验证码已发送，请查收！");
          this.sendSmsLoading = false;
          //倒计时
          this.countDown();
        })
        .catch(() => {
          this.sendSmsLoading = false;
        });*/
    },
    onLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let params = {
            username: this.loginForm.username.trim(),
            password: this.loginForm.password
          };
          this.loading = true;
          console.log(this.$store);
          this.$store
            .dispatch("Login", params)
            .then(() => {
              this.loading = false;
              this.$router.push({ path: this.redirect || "/" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.sign-room {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 auto;
  /*background-color: #29abe2;*/
  background-image: url("../assets/images/login_page_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.img-form {
  margin: 0 auto;
  position: relative;
  top: 50%; /*偏移*/
  border-radius: 8px;
}

.register {
}

.register >>> .el-dialog {
  border-radius: 8px !important;
}
</style>
